<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <input type="text" v-model="names" placeholder="搜索商品名">
    <el-button type="primary" @click="search">搜索</el-button>
    <el-table :data="products" style="width: 100%">
        <el-table-column prop="name" label="产品名称" width="180"></el-table-column>
        <el-table-column prop="image" label="图片" align="center">
            <template slot-scope="scope">
                     <div slot="error" class="image-slot">
                        <img src="./../../images/product_normal.png"   style="width: auto; height: 40px; border:none;" >
                    </div>
            </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip width="100"></el-table-column>
        <el-table-column prop="price" label="价格" width="180"></el-table-column>
        <el-table-column prop="stock" label="库存" width="180"></el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button type="text" size="mini" @click="handleEdit(scope.$index)">编辑</el-button>
                <el-button type="text" size="mini" @click="handleDelete(scope.$index)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-pagination
            @current-change="handlePageChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :total="totalProducts"
            layout="total, prev, pager, next, jumper">
    </el-pagination>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            products: [],
            currentPage: 1,
            pageSize: 10,
            totalProducts: 0,
            names: ''
        },
        methods: {
            search() {
                axios.get('/product/searchByName', {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        name: this.names
                    }
                })
                    .then(response => {
                        if (response.data) {
                            this.products = response.data.records;  // 返回的数据结构中包含 `records`
                            this.totalProducts = response.data.total; // 返回的数据中包含 `total`
                        }
                     })
                    .catch(error => {
                        this.$message.error("搜索失败:" + error.message);
                     });
            },
            handleAdd() {
                window.location.href = 'pro_add.html';
            },
            handleEdit(index) {
                window.location.href = 'edit.html?id=' + this.products[index].id;
            },
            handleDelete(index) {
                const id = this.products[index].id;
                this.$confirm('确认删除该产品？')
                   .then(() => {
                        axios.delete('/product/pro_delete', {
                            params: {
                                id: id
                            }
                        })
                            .then(response => {
                                if (response.data !== null) {
                                    this.$message.success("删除成功");
                                    this.fetchProducts(this.currentPage, this.pageSize);
                                } else {
                                    this.$message.error("删除失败:" + this.products[index].name);
                                }
                             })
                            .catch(error => {
                                this.$message.error("删除失败:" + error.message);
                             });
                    })
                   .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            },
            fetchProducts(pageNum = 1, pageSize = 10) {
                axios.get('/product/pro_list', {
                    params: {
                        pageNum: pageNum,
                        pageSize: pageSize
                    }
                })
                    .then(response => {
                        if (response.data) {
                            this.products = response.data.records;  // 返回的数据结构中包含 `records`
                            this.totalProducts = response.data.total; // 返回的数据中包含 `total`
                        }
                    })
                    .catch(error => {
                        this.$message.error("获取产品列表失败:" + error.message);
                    });
            },
            handlePageChange(pageNum) {
                this.currentPage = pageNum;
                this.fetchProducts(pageNum, this.pageSize);
            }
        },
        created() {
            this.fetchProducts(this.currentPage, this.pageSize);
        }
    });
</script>
</body>
</html>
